<template>
  <el-tag :type="tagType" :effect="effect" :size="size" :round="round">
    {{ displayText }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface Props {
  status: string | number;
  statusMap?: Record<string | number, { text: string; type: string }>;
  type?: "success" | "info" | "warning" | "danger";
  effect?: "dark" | "light" | "plain";
  size?: "large" | "default" | "small";
  round?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  effect: "light",
  size: "default",
  round: false
});

// 默认状态映射
const defaultStatusMap = {
  0: { text: "待执行", type: "info" },
  1: { text: "执行中", type: "warning" },
  2: { text: "已完成", type: "success" },
  3: { text: "已失败", type: "danger" },
  4: { text: "已暂停", type: "info" }
};

const statusMap = computed(() => props.statusMap || defaultStatusMap);

const tagType = computed(() => {
  if (props.type) return props.type;
  return statusMap.value[props.status]?.type || "info";
});

const displayText = computed(() => {
  return statusMap.value[props.status]?.text || String(props.status);
});
</script>
